<template>
  <view class="level-coin-card card-wrap">
    <view class="module level">
      <view class="title">会员等级</view>
      <view v-if="!isLogin" class="hidden-star">***</view>
      <view v-if="isLogin" class="level-value">
        <view class="flag">{{ userInfo.level_code }}</view>
        <vew class="level-name">{{ userInfo.level_name }}</vew>
      </view>
      <u-line-progress v-if="isLogin" height="6" :percentage="percent" :show-text="false" active-color="#78ffe6" />
    </view>

    <view class="module coin" @click="onViewPoints">
      <view class="title">我的青币</view>
      <view v-if="!isLogin" class="hidden-star">***</view>
      <view v-if="isLogin" class="account">{{ userInfo.points }}</view>
      <!-- <u-line-progress v-if="isLogin" height="6" :percentage="60" :show-text="false" active-color="#fff36d" /> -->
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
export default {
  name: 'LevelCoin',
  // #ifdef MP-WEIXIN
  options: {
    styleIsolation: 'shared'
  },
  // #endif
  data() {
    return {
      percent: 0
    }
  },
  computed: {
    ...mapState(['isLogin', 'userInfo', 'isFrozen'])
  },
  mounted() {
    console.log('用户信息')
    console.log(this.userInfo)
    const { growth, lvl_next_growth } = this.userInfo
    this.percent = +((growth / lvl_next_growth).toFixed(2) * 100)
    console.log('进度值')
    console.log(this.percent)
  },
  methods: {
    onViewPoints() {
      this.$utils.navigateToPage('/pagesPoints/pointDetail')
    }
  }
}
</script>

<style lang="scss" scoped>
	.level-coin-card {
		display: flex;
		margin-bottom: 20rpx;

		.module {
			flex: 1;
			@include flex-center;
			flex-flow: column;
			justify-content: flex-start;
			gap: 15rpx;
			padding: 10rpx 0;

			.title {
				font-size: 28rpx;
				font-weight: bolder;
			}
		}

		.level {
			padding-right: 15rpx;
			border-right: 1px solid #ebebeb;

			.level-value {
				display: flex;
				gap: 5rpx;
				align-items: flex-end;
        margin-bottom: 10rpx;

				.flag {
					font-size: 24rpx;
          padding-right: 16rpx;
				}

				.level-name {
					font-size: 40rpx;
					font-weight: bolder;
				}
			}
		}

		.coin {
			padding-left: 15rpx;

			.account {
				font-size: 52rpx;
				font-weight: bolder;
			}
		}
	}

	::v-deep.u-line-progress {
		width: 100%;
	}
</style>
